<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <script src="../js/jquery-3.5.1.min.js"></script>
    <title>首页关于我们</title>
    <style>
        .aboutUs {
            width: 100%;
        }

        .aboutUs_sizeBox {
            padding: 0 100px;
        }

        .aboutUs_flexBox {
            display: flex;
            padding-bottom: 20px;
        }

        .public_title {
            width: 25%;
        }


        .aboutUs_right_text {
            width: 75%;
            padding-left: 100px;
            display: flex;
            align-items: center;
        }

        .aboutUs_right_text p {
            font-size: var(--f_describe);
            color: var(--c_text);
            line-height: var(--l_describe);
        }

        .videolist {
            position: relative;
            height: 500px;
        }

        .videolist:hover {
            cursor: pointer;
        }

        .videolist img:nth-child(1) {
            max-width: 100%;
            height: 100%;
        }

        .videoed {
            width: 60px;
            height: 60px;
            position: absolute;
            left: 50%;
            top: 40%;
            z-index: 9;
            background: url(../images/videBtn.png) -116px -196px no-repeat;

        }

        .videolist img {
            width: 100%;
            height: 100%;
        }

        .videos {
            max-width: 998px;
            display: none;
            border: 1px solid #080808;
            position: fixed;
            left: 50%;
            top: 40%;
            transform: translate(-50%, -50%);
            z-index: 100;
            box-sizing: border-box;
            height: 360px;
            width: 100%;
        }

        .vclose {
            position: absolute;
            right: 1%;
            top: 1%;
            border-radius: 100%;
            cursor: pointer;
        }

        .con {
            margin: 0 auto;
        }

        .masklayer {
            position: fixed;
            display: none;
            width: 100%;
            top: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 9;
            -webkit-user-select: none;
            -ms-user-select: none;
        }

        @media(max-width:768px) {

            .aboutUs_sizeBox {
                padding: 0;
            }

            .aboutUs_flexBox {
                display: block;
            }

            .aboutUs_title {
                padding-top: 20px;
                width: 100%;
            }

            .aboutUs_right_text {
                padding-left: 0;
                padding-top: 20px;
            }

            .aboutUs_flexBox {
                padding-bottom: 30px;
            }

            .videolist {
                height: 200px;
            }

            .videoed {
                left: 43%;
                top: 34%;
            }

            .videos {
                width: 100%;
                height: 210px;
            }
        }
    </style>
</head>

<body>
    <!-- 首页关于我们 -->
    <div class="aboutUs modular title_left">
        <div class="public_width">
            <div class="aboutUs_sizeBox">
                <div class="aboutUs_flexBox">
                    <div class="public_title">
                        <h2>ABOUT US</h2>
                        <p>我们为您打造品牌视觉形象</p>
                    </div>
                    <div class="aboutUs_right_text">
                        <p>ADVERTISING不断的努力和积累，建立了完善的工作和服务流程，在advertising，每一个项目都有专门的团队负责，根据 <br>
                            客户的要求，为您量身规划品牌识别战略，全程跟踪指导品牌识别系统的导入与应用，彻底做到行之有效。</p>
                    </div>
                </div>
            </div>
            <!-- 视频播放 -->
            <div class="video">
                <div class="con">
                    <div class="videolist"
                        ipath="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4">
                        <img class="w-100"
                            src="https://20898346.s61i.faiusr.com/2/AD0IqsT7CRACGAAgx9Le7gUoiKjqxAYwoAs49AM.jpg" />
                        <!--背景图片-->
                        <div class="videoed">
                            <!-- <img src="../images/videBtn.png" class=" " /> -->
                            <!--播放按钮  -->
                        </div>

                    </div>
                    <div class=" masklayer">
                        <!--遮罩层-->
                        <div class="videos"></div>
                        <!--存放视频-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // 播放视频
    $('.videolist').each(function () { //遍历视频列表
        $(this).click(function () { //视频被点击后执行
            var img = $(this).attr('vpath'); //获取视频预览图
            var video = $(this).attr('ipath'); //获取视频路径
            $('.videos').html("<video id=\"video\" poster='" + img + "' style='width: 100%' src='" +
                video +
                "' preload=\"auto\" controls=\"controls\" autoplay=\"autoplay\"></video><img onClick=\"close1()\" class=\"vclose\" src=\"../images/videBtn2.png\" width=\"25\" height=\"25\"/>"
            );
            $('.videos').show(); //视频窗口弹出
            $('.masklayer').show(); //遮罩层弹出
            $('body').css('overflow', 'hidden'); //禁止滚动
            winHeight = document.body.clientHeight;
            $(".masklayer").height(winHeight + 5000 + "px");
        });
    });

    function close1() {
        var v = document.getElementById('video'); //获取视频节点
        $('.videos').hide(); //点击关闭
        $('.masklayer').hide(); //遮罩层隐藏
        v.pause(); //停止
        $('.videos').html();
    }
</script>

</html>